<template>
  <div>
    <el-dialog
        :close-on-click-modal="false"
        :visible.sync="addDialog"
        title="财务添加报销"
        width="40%"
        top="50px"
        center
    >
      <div class="flexBox">
        <p><span>*</span>报销一级分类:</p>
        <el-select
            clearable
            size="small"
            style="width: 350px"
            placeholder="请选择一级分类"
            v-model="parpmsData.financeId"
            @change="changeFinanceId"
        >
          <el-option
              v-for="(e, i) in oneType"
              :label="e.financeName"
              :key="i"
              :value="e.financeId"
          ></el-option>
        </el-select>
      </div>
      <div class="flexBox" v-if="twoType.length">
        <p><span>*</span>报销二级分类:</p>
        <el-select
            clearable
            size="small"
            style="width: 350px"
            placeholder="请选择二级分类"
            v-model="parpmsData.financeLevelId"
        >
          <el-option
              v-for="(e, i) in twoType"
              :label="e.levelName"
              :key="i"
              :value="e.id"
          ></el-option>
        </el-select>
      </div>
      <template v-if="parpmsData.financeId && parpmsData.financeLevelId">
        <div
            class="flexBox"
            v-if="parpmsData.financeId != 1 && parpmsData.financeId != 2"
        >
          <p>店铺名称：</p>
          <!-- <span>*</span> -->
          <el-select
              filterable
              remote
              :remote-method="remoteMethod"
              value-key="orderId"
              clearable
              v-model="parpmsData.orderId"
              size="small"
              :disabled="disabled"
              style="width: 350px"
              placeholder="请输入店铺名称"
          >
            <el-option
                v-for="item in saleNameList"
                :key="item.orderId"
                :label="item.storeName"
                :value="item.orderId"
            >
            </el-option>
          </el-select>
        </div>
        <div
            class="flexBox"
            v-if="
            parpmsData.financeId != 2 &&
            ([1,3,4,13,14,15,16].includes(parpmsData.financeId))
          "
        >
          <p>所属区域：</p>
          <!-- <span>*</span> -->
          <el-select
              size="small"
              style="width: 350px"
              placeholder="请选择所属区域"
              v-model="parpmsData.areaId"
          >
            <el-option
                :label="item.areaName"
                :value="item.area"
                :key="item.area"
                v-for="item in areaData"
            ></el-option>
          </el-select>
        </div>
        <div
            class="flexBox"
            v-if="parpmsData.financeId != 1 && parpmsData.financeId != 2"
        >
          <p>责任主体：</p>
          <!-- <span>*</span> -->
          <el-select
              size="small"
              style="width: 350px"
              placeholder="请选择责任主体"
              v-model="parpmsData.optioner"
              @change="changeResponsibility"
          >
            <el-option
                :label="item.optionerName"
                :value="item.id"
                :key="item.id"
                v-for="item in responsibility"
            ></el-option>
          </el-select>
        </div>
        <div
            class="flexBox"
            v-if="
            parpmsData.financeId != 1 &&
            parpmsData.financeId != 2 &&
            reimburseTypeData.length
          "
        >
          <p>报销原因类型：</p>
          <!-- <span>*</span> -->
          <el-select
              size="small"
              style="width: 350px"
              placeholder="请选择报销原因类型"
              v-model="parpmsData.reimburseType"
          >
            <el-option
                :label="item.reimburseType"
                :value="item.id"
                :key="item.id"
                v-for="item in reimburseTypeData"
            ></el-option>
          </el-select>
        </div>

        <div class="flexBox" v-if="parpmsData.financeLevelId === 20">
          <p>零时工人数：</p>
          <!-- <span>*</span> -->
          <el-input
              v-model="parpmsData.temporaryWorkerNum"
              size="small"
              style="width: 350px"
          ></el-input>
        </div>
        <div class="flexBox">
          <p>报销原因说明：</p>
          <el-input
              v-model="parpmsData.reimburseRemark"
              type="textarea"
              size="small"
              style="width: 350px"
          ></el-input>
        </div>
        <div class="flexBox">
          <p><span>*</span>报销金额：</p>
          <el-input
              v-model="parpmsData.money"
              type="number"
              style="width: 350px"
              size="small"
          ></el-input>
        </div>
        <div class="flexBox">
          <p>付款方式：</p>
          <el-select v-model="parpmsData.paymentMethodId" style="width: 350px" size="small">
            <el-option
                v-for="(item, index) in payTypeList"
                :key="index"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="flexBox">
          <p>报销凭证：</p>
          <uploaderMore
              v-model="payImgArray"
              :isDrag="true"
              :limit="30"
          ></uploaderMore>
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addInfoNew" v-preventReClick
        >确 定</el-button
        >
      </span>
    </el-dialog>


  </div>
</template>

<script>
import store from "../../../store";
import axios from "axios";

export default {
  name: "financePay",
  data() {
    return {
      addDialog: false,
      disabled: false,
      parpmsData: {
        financeLevelId: "",
        reimburseType: "",
        financeId: "",
        orderId: "",
        areaId: "",
        optioner: "",
        temporaryWorkerNum: "",
        reimburseRemark: "",
        money: "",
      },
      responsibility: [],
      payTypeList: [],
      payImgArray: [],
      saleNameList: [],
      reimburseTypeData: [],
      areaData: [],
      oneType: [],
      twoType: [],
    }
  },
  computed: {
    headerToken() {
      const token = store.state.token
      return {
        token,
      }
    },
    headers() {
      const token = store.state.token
      return {
        token,
      }
    },
  },
  created() {
    document.addEventListener('paste', this.handlePaste)
  },
  methods: {
    uploadImage(imageFile) {
      const formData = new FormData()
      formData.append('file', imageFile)
      for (let [key, value] of formData.entries()) {
        console.log(`${key}:`, value)
      }
      if (imageFile.size > 5000000)
        return this.$message.warning('图片大于5MB，请压缩后上传！')
      axios
          .post(`${this.$apiHost}/common/fileImgUrl`, formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
              token: store.state.token,
            },
          })
          .then((response) => {
            this.payImgArray.push(response.data.result[0])
          })
          .catch((error) => {
          })
    },
    handlePaste(event) {
      if (!this.addDialog) return
      const clipboardData = event.clipboardData || window.clipboardData
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i]
          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile()
            if (file) {
              this.uploadImage(file)
            }
          } else if (item.kind === 'string' && item.type.startsWith('text/')) {
            console.log('text')
          } else {
            this.$message.error('请拷贝图片!')
            break
          }
        }
      }
    },
    handleOpen() {
      this.addDialog = true
      this.parpmsData = this.$options.data.call(this).parpmsData
      this.getTypeList()
      this.getPayType()
      this.$api.financeOneType().then((res) => {
        this.oneType = []
        this.twoType = []
        this.oneType = res
      })
      this.$api.orderGetSystemTypeVo().then((res) => {
        this.ppTypeList = []
        this.ppTypeList = res
      })
      this.$api.areaLedgerAreaList().then((res) => {
        this.areaData = []
        this.areaData = res
      })
      this.$api.financeGetOptionerType().then((res) => {
        this.responsibility = []
        this.responsibility = res
      })

    },
    async getPayType() {
      const res = await this.$api.orderGetPaymentMethod()
      if (res && res.length) {
        this.payTypeList = []
        this.payTypeList = res
      }
    },
    changeFinanceId(e) {
      this.parpmsData.financeLevelId = null
      this.twoType = []
      if (e) {
        if (e == 1 || e == 2) {
          this.parpmsData.optioner = 5
          this.parpmsData.reimburseType = 15
        }
        this.$api
            .financeGetFinanceLevelTypeByFid({financeId: e})
            .then((res) => {
              console.log('联动出的二级', res)

              this.twoType = res
            })
      }
    },
    remoteMethod(val) {
      if (val) {
        const params = {
          storeName: val,
          isClose: 1,
        }
        this.$api.orderGetOrderInfoLikeName(params).then((res) => {
          this.saleNameList = res
        })
      }
    },
    changeResponsibility(e) {
      console.log('责任主体变化', e)
      if (e) {
        this.parpmsData.reimburseType = null
        this.$api
            .financeGetReimburseTypeByOid({optionerId: e})
            .then((res) => {
              console.log('联动出的原因类型', res)
              this.reimburseTypeData = []
              this.reimburseTypeData = res
            })
      }
    },
    addInfoNew() {
      if (!this.parpmsData.financeId || !this.parpmsData.financeLevelId) {
        return this.$message.warning('请选择一二级分类!')
      }
      if (this.parpmsData.financeId != 1 && this.parpmsData.financeId != 2) {
        if (!this.parpmsData.orderId) {
          return this.$message.warning('请输入店铺!')
        }
        if (!this.parpmsData.optioner) {
          return this.$message.warning('请选择责任主体!')
        }
        if (!this.parpmsData.reimburseType) {
          return this.$message.warning('请选择原因类型!')
        }
        if (
            this.parpmsData.financeId == 4 &&
            this.parpmsData.financeLevelId === 20 &&
            !this.parpmsData.temporaryWorkerNum
        ) {
          return this.$message.warning('请输入临时工人数!')
        }
      }
      if (this.parpmsData.financeId === 1) {
        if (!this.parpmsData.areaId) {
          return this.$message.warning('请选择区域!')
        }
      }
      if (!this.parpmsData.money) {
        return this.$message.warning('请输入报销金额!')
      }
      this.parpmsData.proof = this.payImgArray
      this.$api.financeAddFinanceDataReimburse({...this.parpmsData, type: 1}).then((res) => {
        console.log('新增', res)
        if (res == 1) {
          this.$message.success('新增成功!')
          this.$emit('addStatus', 1)
          this.addDialog = false
        }
        this.loading = false
      })
    },
    getTypeList() {
      this.$api.newAfterSaleTypesEnum().then((res) => {
        this.SaleTypeData = res
      })
    },
  }
}
</script>

<style scoped lang="less">
.flexBox {
  display: flex;
  margin-left: 50px;
  margin-bottom: 15px;
  justify-content: flex-start;
  align-items: center;

  p {
    width: 100px;
  }

  span {
    color: #ce0e0f;
  }

  .el-input {
    width: 300px;
  }
}
</style>